<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lumina AI - 让学习 AI 变简单</title>
    <script src="../assets/js/tailwindcss.js"></script>
    <script src="../assets/js/tailwindcss.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FFE45C',
                        secondary: '#FFE45C', // 主题色统一为柠檬黄
                        accent: '#10B981'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '8px'
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.6s ease-in-out',
                        'slide-up': 'slideUp 0.8s ease-out',
                        'bounce-gentle': 'bounceGentle 2s infinite'
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' }
                        },
                        slideUp: {
                            '0%': { transform: 'translateY(30px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' }
                        },
                        bounceGentle: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-10px)' }
                        }
                    }
                }
            }
        }
    </script>
    <!-- <link rel="preconnect" href="https://fonts.googleapis.com"> -->
    <!-- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> -->
    <link href="../assets/css/google-fonts-pacifico-inter.css" rel="stylesheet">
    <link href="../assets/css/font-awesome.min.css" rel="stylesheet">
    <link href="../assets/css/lemon-milk.css" rel="stylesheet">
    <link href="../assets/css/google-fonts-montserrat.css" rel="stylesheet">
    <link href="../assets/css/index.css" rel="stylesheet">
</head>
<body class="min-h-screen font-['Inter'] scroll-smooth flex flex-col">
    <!-- 导航栏 -->
    <header class="fixed top-0 left-0 right-0 bg-white/95 backdrop-blur-md z-50 border-b border-gray-100 shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
            <div class="flex items-center gap-3">
                <a href="../index.html" class="flex items-center gap-3">
                    <span class="text-2xl text-black" style="font-family: 'Montserrat', Arial, sans-serif;">lumina AI</span>
                </a>
            </div>
            
            <!-- 桌面端导航 -->
            <nav class="hidden md:flex items-center gap-8 justify-center flex-1">
                <a href="../index.html" class="text-gray-600 hover:text-[#FFE45C] font-medium transition-colors duration-200">主页</a>
                <a href="./index.html" class="text-[#FFE45C] font-medium transition-colors duration-200">AI词条</a>
                <a href="../AiOpen/index.html" class="text-gray-600 hover:text-[#FFE45C] font-medium transition-colors duration-200">AI开源</a>
                <a href="../AiHardware/index.html" class="text-gray-600 hover:text-[#FFE45C] font-medium transition-colors duration-200">AI硬件</a>
                <a href="../AiPrompts/index.html" class="text-gray-600 hover:text-[#FFE45C] font-medium transition-colors duration-200">指令库</a>
                <a href="../AiBlog/index.html" class="text-gray-600 hover:text-[#FFE45C] font-medium transition-colors duration-200">博客</a>
            </nav>
            
            <!-- 工具区域：微信、知识星球、登陆 -->
            <div class="flex items-center gap-4">
                <button class="flex items-center gap-1 text-gray-600 hover:text-secondary hover:bg-gray-100 rounded-lg px-3 py-2 transition-all duration-200">
                    <i class="fab fa-weixin"></i>
                </button>
                <button class="flex items-center gap-1 text-gray-600 hover:text-secondary hover:bg-gray-100 rounded-lg px-3 py-2 transition-all duration-200">
                    <i class="fas fa-globe"></i>
                </button>
                <button class="flex items-center gap-1 text-gray-600 hover:text-secondary hover:bg-gray-100 rounded-lg px-3 py-2 transition-all duration-200">
                    <i class="fas fa-user"></i>
                </button>
                
                <!-- 移动端菜单按钮 -->
                <button class="md:hidden w-10 h-10 flex items-center justify-center text-gray-600 hover:text-secondary hover:bg-gray-100 rounded-lg transition-all duration-200" onclick="toggleMobileMenu()">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </div>
        
        <!-- 移动端菜单 -->
        <div id="mobileMenu" class="md:hidden hidden bg-white border-t border-gray-100">
            <div class="px-4 py-6 space-y-4">
                <a href="../index.html" class="block text-gray-700 hover:text-secondary font-medium py-2">主页</a>
                <a href="./index.html" class="block text-[#FFE45C] font-medium py-2">AI词条</a>
                <a href="../AiOpen/index.html" class="block text-gray-600 hover:text-secondary font-medium py-2">AI开源</a>
                <a href="../AiHardware/index.html" class="block text-gray-600 hover:text-secondary font-medium py-2">AI硬件</a>
                <a href="../AiPrompts/index.html" class="block text-gray-600 hover:text-secondary font-medium py-2">指令库</a>
                <a href="../AiBlog/index.html" class="block text-gray-600 hover:text-secondary font-medium py-2">博客</a>
            </div>
        </div>
    </header>

    <!-- 固定在顶部的搜索栏 -->
    <div id="stickySearchBar" class="fixed top-16 left-0 right-0 bg-white/95 backdrop-blur-md z-40 border-b border-gray-100 shadow-sm transform -translate-y-full transition-transform duration-300">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
            <div class="flex items-center gap-4">
                <!-- 搜索框 -->
                <div class="flex-1 max-w-md">
                    <div class="relative">
                        <input type="text" id="stickySearchInput" placeholder="搜索AI词条..." 
                               class="w-full px-4 py-2 pr-10 bg-white rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent">
                        <button class="absolute right-2 top-1/2 transform -translate-y-1/2 w-6 h-6 bg-primary rounded flex items-center justify-center hover:bg-primary/90 transition-colors">
                            <i class="fas fa-search text-white text-xs"></i>
                        </button>
                    </div>
                </div>
                
                <!-- 分类筛选 -->
                <div id="stickyCategoryFilters" class="hidden md:flex gap-2">
                    <button class="sticky-filter-btn active px-3 py-2 rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors text-xs" data-category="all">
                        全部
                    </button>
                </div>
                
                <!-- 统计信息 -->
                <div class="hidden lg:flex items-center gap-2 text-sm text-gray-600">
                    <span>找到 <span id="stickyEntryCount" class="font-bold text-primary">0</span> 个词条</span>
                </div>
            </div>
        </div>
    </div>

    <main class="pt-16 flex-1">
        <!-- 英雄区域 -->
        <section id="home" class="relative py-20 overflow-hidden bg-gradient-to-br from-primary/20 via-white to-secondary/10">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                    <!-- 左侧内容 -->
                    <div class="space-y-6">
                        <div class="space-y-4">
                            <div class="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 rounded-full text-primary font-medium" style="color: #555555;">
                                <i class="fas fa-book text-sm"></i>
                                <span>AI知识百科</span>
                            </div>
                            <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 leading-tight hero-title">
                                AI词条
                                <span class=" text-primary">知识库</span>
                            </h1>
                            <p class="text-lg text-gray-600 leading-relaxed max-w-2xl hero-description">
                                系统梳理AI领域核心概念，从基础术语到前沿技术，助你快速掌握AI知识体系
                            </p>
                        </div>
                        
                        <!-- 搜索框 -->
                        <div class="relative max-w-md hero-search">
                            <div class="relative">
                                <input type="text" id="searchInput" placeholder="搜索AI词条..." 
                                       class="w-full px-5 py-3 pr-12 bg-white rounded-xl border-2 border-gray-200 focus:border-primary focus:outline-none shadow-lg hero-search-input">
                                <button class="absolute right-2 top-1/2 transform -translate-y-1/2 w-8 h-8 bg-primary rounded-lg flex items-center justify-center hover:bg-primary/90 transition-colors">
                                    <i class="fas fa-search text-white text-sm"></i>
                                </button>
                            </div>
                        </div>
                        
                        <!-- 分类筛选 -->
                        <div id="categoryFilters" class="flex flex-wrap gap-3 mb-4">
                            <button class="filter-btn active px-4 py-2 rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors text-sm" data-category="all">
                                全部
                            </button>
                        </div>
                        
                        <!-- 统计信息 -->
                        <div class="flex gap-6 text-sm text-gray-500 hero-stats">
                            <div class="flex items-center gap-2">
                                <i class="fas fa-book-open text-primary"></i>
                                <span id="entryCount"></span>词条
                            </div>
                            <div class="flex items-center gap-2">
                                <i class="fas fa-users text-primary"></i>
                                <span>1万+ 学习者</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <i class="fas fa-star text-primary"></i>
                                <span>持续更新</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 右侧内容 -->
                    <div class="relative">
                        <!-- 浮动卡片 -->
                        <div class="relative z-10 hero-card">
                            <div class="bg-white rounded-2xl p-6 shadow-xl border border-gray-100">
                                <div class="flex items-center gap-3 mb-4">
                                    <div class="w-10 h-10 bg-gradient-to-br from-blue-100 to-blue-200 rounded-xl flex items-center justify-center">
                                        <i class="fas fa-brain text-blue-600"></i>
                                    </div>
                                    <div>
                                        <h3 class="text-lg font-bold text-gray-900">今日推荐</h3>
                                        <!-- <p class="text-sm text-gray-500">今日推荐</p> -->
                                    </div>
                                </div>
                                <div id="hotItemsContainer" class="space-y-3">
                                    <!-- 热门词条将通过JavaScript动态生成 -->
                                    <div class="flex items-center justify-center py-8">
                                        <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 背景装饰 -->
                        <div class="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-primary/20 to-secondary/20 rounded-full blur-xl"></div>
                        <div class="absolute -bottom-4 -left-4 w-20 h-20 bg-gradient-to-br from-blue-200/30 to-purple-200/30 rounded-full blur-lg"></div>
                    </div>
                </div>
                
                <!-- 浮动元素 -->
                <div class="hidden lg:block absolute right-0 top-1/2 transform -translate-y-1/2">
                    <div class="floating-animation">
                        <div class="w-72 h-72 bg-gradient-to-br from-secondary/20 to-primary/20 rounded-full blur-3xl"></div>
                    </div>
                </div>
            </div>
        </section>



       



        <!-- 所有词条区 -->
        <section class="py-16 bg-white">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex items-center justify-between mb-8">
                    <div>
                        <h2 class="text-3xl font-bold text-gray-900 mb-2">词条卡片</h2>
                        <p class="text-lg text-gray-600">AI领域核心概念</p>
                    </div>
                    
                </div>
                
                <!-- 加载动画 -->
                <div id="loadingSpinner" class="flex justify-center py-12">
                    <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
                </div>
                
                <div id="cardsContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <!-- 卡片将通过JavaScript动态生成 -->
                </div>
            </div>
        </section>

      

    <!-- 简洁页脚 -->
     <!-- 简洁页脚 -->
     <footer class="bg-gray-50 text-gray-500 py-8 border-t border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <div class="mb-2 text-base font-semibold text-gray-700 site-description"></div>
            <div class="text-xs text-gray-400 icp-number"></div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        let allEntries = [];
        let filteredEntries = [];
        let currentCategory = 'all';
        let searchTerm = '';

        // 颜色映射
        const colorMap = {
            'blue': 'from-blue-100 to-blue-200 text-blue-600',
            'green': 'from-green-100 to-green-200 text-green-600',
            'purple': 'from-purple-100 to-purple-200 text-purple-600',
            'orange': 'from-orange-100 to-orange-200 text-orange-600',
            'indigo': 'from-indigo-100 to-indigo-200 text-indigo-600',
            'teal': 'from-teal-100 to-teal-200 text-teal-600',
            'pink': 'from-pink-100 to-pink-200 text-pink-600',
            'red': 'from-red-100 to-red-200 text-red-600',
            'cyan': 'from-cyan-100 to-cyan-200 text-cyan-600',
            'amber': 'from-amber-100 to-amber-200 text-amber-600'
        };

        // 标签颜色映射
        const tagColorMap = {
            'NLP': 'bg-blue-100 text-blue-600',
            'CV': 'bg-purple-100 text-purple-600',
            'RL': 'bg-red-100 text-red-600',
            'LLM': 'bg-orange-100 text-orange-600',
            'ML': 'bg-green-100 text-green-600',
            'AI': 'bg-cyan-100 text-cyan-600',
            '架构': 'bg-green-100 text-green-600',
            '应用': 'bg-purple-100 text-purple-600',
            '算法': 'bg-blue-100 text-blue-600',
            '前沿技术': 'bg-orange-100 text-orange-600',
            '基础概念': 'bg-indigo-100 text-indigo-600',
            '注意力机制': 'bg-teal-100 text-teal-600',
            '图像处理': 'bg-green-100 text-green-600',
            '智能体': 'bg-red-100 text-red-600',
            '文本处理': 'bg-pink-100 text-pink-600',
            '深度学习': 'bg-indigo-100 text-indigo-600',
            '注意力': 'bg-teal-100 text-teal-600',
            '多模态': 'bg-amber-100 text-amber-600',
            '融合': 'bg-cyan-100 text-cyan-600',
            '智能': 'bg-cyan-100 text-cyan-600'
        };

        // 格式化时间
        function formatTime(timeString) {
            const date = new Date(timeString);
            const now = new Date();
            const diff = now - date;
            
            const minutes = Math.floor(diff / 60000);
            const hours = Math.floor(diff / 3600000);
            const days = Math.floor(diff / 86400000);
            
            if (minutes < 60) {
                return `${minutes}分钟前`;
            } else if (hours < 24) {
                return `${hours}小时前`;
            } else {
                return `${days}天前`;
            }
        }

        // 创建卡片HTML
        function createCardHTML(entry) {
            const colorClass = colorMap[entry.logoColor] || 'from-gray-100 to-gray-200 text-gray-600';
            
            return `
                <div class="bg-white rounded-xl p-6 border border-gray-200 hover:border-primary/30 hover:shadow-lg transition-all duration-300 group cursor-pointer" 
                     onclick="openCard('${entry.cardPath}')" 
                     data-category="${entry.category}"
                     data-search="${entry.name.toLowerCase()} ${entry.description.toLowerCase()}">
                    <div class="flex items-start justify-between mb-4">
                        <div class="w-12 h-12 bg-gradient-to-br ${colorClass} rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
                            <i class="${entry.logo} text-xl"></i>
                        </div>
                        <span class="text-xs text-gray-500">${formatTime(entry.publishTime)}</span>
                    </div>
                    <h3 class="text-lg font-bold text-gray-900 mb-3 group-hover:text-primary transition-colors">${entry.name}</h3>
                    <p class="text-gray-600 text-sm mb-4 h-16 flex items-center">${entry.description}</p>
                    <div class="flex items-center justify-between">
                        <div class="flex gap-2 flex-wrap">
                            ${entry.tags.map(tag => {
                                const tagColor = tagColorMap[tag] || 'bg-gray-100 text-gray-600';
                                return `<span class="px-2 py-1 ${tagColor} text-xs rounded-full">${tag}</span>`;
                            }).join('')}
                        </div>
                        <i class="fas fa-arrow-right text-gray-400 group-hover:text-primary group-hover:translate-x-1 transition-all"></i>
                    </div>
                </div>
            `;
        }

        // 打开卡片页面
        function openCard(cardPath) {
            // 从cardPath中提取词条ID
            const entryId = cardPath.split('/').pop().replace('.html', '');
            
            // 跳转到详情页面
            window.location.href = `./card-detail.html?id=${entryId}`;
        }

        // 过滤和搜索
        function filterAndSearch() {
            filteredEntries = allEntries.filter(entry => {
                const categoryMatch = currentCategory === 'all' || entry.category === currentCategory;
                const searchMatch = searchTerm === '' || 
                    entry.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
                    entry.description.toLowerCase().includes(searchTerm.toLowerCase());
                return categoryMatch && searchMatch;
            });
            
            renderCards();
        }

        // 渲染热门词条
        function renderHotItems() {
            const container = document.getElementById('hotItemsContainer');
            if (!container) return;
            
            // 获取最新的3个词条
            const latestEntries = allEntries
                .sort((a, b) => new Date(b.publishTime) - new Date(a.publishTime))
                .slice(0, 3);
            
            if (latestEntries.length === 0) {
                container.innerHTML = `
                    <div class="text-center py-4">
                        <p class="text-gray-500 text-sm">暂无推荐词条</p>
                    </div>
                `;
                return;
            }
            
            const hotItemsHTML = latestEntries.map(entry => {
                const colorClass = colorMap[entry.logoColor] || 'text-primary';
                return `
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer hot-item" 
                         onclick="openCard('${entry.cardPath}')" 
                         data-entry-id="${entry.id}">
                        <div class="flex items-center gap-3">
                            <i class="${entry.logo} ${colorClass}"></i>
                            <span class="font-medium">${entry.name}</span>
                        </div>
                        <i class="fas fa-arrow-right text-gray-400 text-sm"></i>
                    </div>
                `;
            }).join('');
            
            container.innerHTML = hotItemsHTML;
        }

        // 渲染卡片
        function renderCards() {
            const container = document.getElementById('cardsContainer');
            const countElement = document.getElementById('entryCount');
            const stickyCountElement = document.getElementById('stickyEntryCount');
            
            if (filteredEntries.length === 0) {
                container.innerHTML = `
                    <div class="col-span-full text-center py-12">
                        <i class="fas fa-search text-gray-400 text-4xl mb-4"></i>
                        <p class="text-gray-500 text-lg">没有找到匹配的词条</p>
                    </div>
                `;
            } else {
                container.innerHTML = filteredEntries.map(createCardHTML).join('');
            }
            
            // 更新统计信息
            if (countElement) {
                countElement.textContent = filteredEntries.length;
            }
            if (stickyCountElement) {
                stickyCountElement.textContent = filteredEntries.length;
            }
        }

        // 加载数据
        async function loadData() {
            try {
                const response = await fetch('./Entrys.json');
                const data = await response.json();
                allEntries = data.entries;
                filteredEntries = [...allEntries];
                
                // 动态生成分类按钮
                renderCategoryFilters(data.categories);
                
                renderCards();
                renderHotItems(); // 渲染热门词条
                document.getElementById('loadingSpinner').style.display = 'none';
            } catch (error) {
                console.error('加载数据失败:', error);
                document.getElementById('loadingSpinner').innerHTML = `
                    <div class="text-center py-12">
                        <i class="fas fa-exclamation-triangle text-red-500 text-4xl mb-4"></i>
                        <p class="text-red-600">加载失败，请检查网络连接</p>
                    </div>
                `;
            }
        }

        // 渲染分类筛选按钮
        function renderCategoryFilters(categories) {
            const categoryFilters = document.getElementById('categoryFilters');
            const stickyCategoryFilters = document.getElementById('stickyCategoryFilters');
            
            // 清空现有按钮（保留"全部"按钮）
            const allButtons = categoryFilters.querySelectorAll('.filter-btn:not([data-category="all"])');
            allButtons.forEach(btn => btn.remove());
            
            const stickyAllButtons = stickyCategoryFilters.querySelectorAll('.sticky-filter-btn:not([data-category="all"])');
            stickyAllButtons.forEach(btn => btn.remove());
            
            // 添加分类按钮
            categories.forEach(category => {
                // 主页分类按钮
                const filterBtn = document.createElement('button');
                filterBtn.className = 'filter-btn px-4 py-2 rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300 transition-colors text-sm';
                filterBtn.setAttribute('data-category', category.name);
                filterBtn.textContent = category.name;
                categoryFilters.appendChild(filterBtn);
                
                // 固定搜索栏分类按钮
                const stickyFilterBtn = document.createElement('button');
                stickyFilterBtn.className = 'sticky-filter-btn px-3 py-2 rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300 transition-colors text-xs';
                stickyFilterBtn.setAttribute('data-category', category.name);
                stickyFilterBtn.textContent = category.name;
                stickyCategoryFilters.appendChild(stickyFilterBtn);
            });
            
            // 重新绑定事件监听器
            bindFilterEvents();
        }

        // 绑定筛选事件
        function bindFilterEvents() {
            // 分类筛选
            document.querySelectorAll('.filter-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    document.querySelectorAll('.filter-btn').forEach(b => {
                        b.classList.remove('active', 'bg-primary', 'text-white');
                        b.classList.add('bg-gray-200', 'text-gray-700');
                    });
                    
                    this.classList.add('active', 'bg-primary', 'text-white');
                    this.classList.remove('bg-gray-200', 'text-gray-700');
                    
                    currentCategory = this.dataset.category;
                    filterAndSearch();
                });
            });
            
            // 固定搜索栏的筛选按钮
            document.querySelectorAll('.sticky-filter-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    // 更新固定搜索栏按钮状态
                    document.querySelectorAll('.sticky-filter-btn').forEach(b => {
                        b.classList.remove('active', 'bg-primary', 'text-white');
                        b.classList.add('bg-gray-200', 'text-gray-700');
                    });
                    
                    this.classList.add('active', 'bg-primary', 'text-white');
                    this.classList.remove('bg-gray-200', 'text-gray-700');
                    
                    // 同步主页筛选按钮状态
                    const mainFilterBtn = document.querySelector(`.filter-btn[data-category="${this.dataset.category}"]`);
                    if (mainFilterBtn) {
                        document.querySelectorAll('.filter-btn').forEach(b => {
                            b.classList.remove('active', 'bg-primary', 'text-white');
                            b.classList.add('bg-gray-200', 'text-gray-700');
                        });
                        mainFilterBtn.classList.add('active', 'bg-primary', 'text-white');
                        mainFilterBtn.classList.remove('bg-gray-200', 'text-gray-700');
                    }
                    
                    currentCategory = this.dataset.category;
                    filterAndSearch();
                });
            });
        }

        // 移动端菜单切换
        function toggleMobileMenu() {
            const menu = document.getElementById('mobileMenu');
            menu.classList.toggle('hidden');
        }

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // 滚动时导航栏效果和搜索栏显示
        let lastScrollY = 0;
        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            const stickySearchBar = document.getElementById('stickySearchBar');
            const currentScrollY = window.scrollY;
            
            // 导航栏阴影效果
            if (currentScrollY > 100) {
                header.classList.add('shadow-lg');
                header.classList.remove('shadow-sm');
            } else {
                header.classList.remove('shadow-lg');
                header.classList.add('shadow-sm');
            }
            
            // 搜索栏显示/隐藏逻辑
            if (currentScrollY > 300) {
                // 显示搜索栏
                stickySearchBar.classList.remove('-translate-y-full');
                stickySearchBar.classList.add('translate-y-0');
            } else {
                // 隐藏搜索栏
                stickySearchBar.classList.add('-translate-y-full');
                stickySearchBar.classList.remove('translate-y-0');
            }
            
            lastScrollY = currentScrollY;
        });

        // 事件监听器
        document.addEventListener('DOMContentLoaded', function() {
            // 加载数据
            loadData();
            
            // 搜索功能
            const searchInput = document.getElementById('searchInput');
            const stickySearchInput = document.getElementById('stickySearchInput');
            
            if (searchInput) {
                searchInput.addEventListener('input', function() {
                    searchTerm = this.value;
                    // 同步固定搜索栏的输入
                    if (stickySearchInput) {
                        stickySearchInput.value = this.value;
                    }
                    filterAndSearch();
                });
                
                // 搜索按钮点击事件
                const searchButton = searchInput.nextElementSibling;
                if (searchButton) {
                    searchButton.addEventListener('click', function() {
                        searchTerm = searchInput.value;
                        filterAndSearch();
                    });
                }
            }
            
            // 固定搜索栏功能
            if (stickySearchInput) {
                stickySearchInput.addEventListener('input', function() {
                    searchTerm = this.value;
                    // 同步英雄区域搜索框的输入
                    if (searchInput) {
                        searchInput.value = this.value;
                    }
                    filterAndSearch();
                });
                
                // 固定搜索栏按钮点击事件
                const stickySearchButton = stickySearchInput.nextElementSibling;
                if (stickySearchButton) {
                    stickySearchButton.addEventListener('click', function() {
                        searchTerm = stickySearchInput.value;
                        filterAndSearch();
                    });
                }
            }
            
            // 热门词条点击效果（动态生成的词条会通过onclick属性处理）
            // 如果需要额外的点击处理，可以在这里添加
        });

    </script>
    <script src="../assets/js/common.js"></script>
</body>
</html>